/**
 * useState
 *    概念：勾出 state 数据
 *    语法：
 *        const [state, setState] = useState(initialState)
 *
 *        1. initialState  一个可选的初始state数据
 *        2. 返回值是一个数组的格式
 *            1. 数组第一项  state 表示勾出来的 state 数据
 *                  组件第一次执行时，state 的值，为 initialState 的值
 *                  组件后续执行时，  state 的值，为 上一次 setState() 修改的值。
 *            2. 数组第二项  setState 表示 修改这份state数据的一个函数
 *
 *    需要多份state数据如何办？
 *      调用 useState 多次即可。
 *
 *    initialState 有两种语法
 *      1. 直接一个 值
 *      2. 函数，函数中返回初始值
 *
 *    返回的数组的第二项(也就是更新state的函数)有一些语法：
 *      1. setState(newState)
 *      2. setState(函数内返回newState)
 *
 *    setState 是否是异步？
 *      可能是异步的，也就是不能在 setState 之后，立即获取最新的数据或真实DOM.
 *      PS：注意 这里的 setState 不支持 第二个参数
 *
 *
 */

import { useState } from "react";

const list = [
  { id: 1, name: "张三", isShow: true },
  { id: 2, name: "李四", isShow: true },
  { id: 3, name: "王五", isShow: false },
  { id: 4, name: "马六", isShow: true },
];

function App() {
  const [count, setCount] = useState(1);
  const [name, setName] = useState("张三");
  const [userList, setUserList] = useState(() => {
    // 额外的初始化逻辑
    return list.filter((item) => item.isShow);
  });
  console.log("App", count);

  function handleClick() {
    setCount((prevCount) => prevCount + 1);
    setCount((prevCount) => prevCount + 1);
    setCount((prevCount) => prevCount + 1);
    setCount((prevCount) => prevCount + 1);
    setCount((prevCount) => prevCount + 1);

    console.log(count);
  }

  return (
    <div>
      <h1>App</h1>
      <button
        onClick={() => {
          // count++;
          setCount(count + 1);
        }}
      >
        {count}
      </button>
      <button onClick={() => setName(name + "~")}>{name}</button>
      {/* 
        点击如下按钮，期望让 count + 5
      
      */}
      <button onClick={handleClick}>+5</button>
      <ul>
        {userList.map((item) => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;
